<template>
  <van-search    shape="round" class="blog-m--search"
      v-model="q"
      show-action
      placeholder="请输入文章关键词"
      @search="onSearch"
    >
    <!-- 显示按钮需要带有show-action属性 -->
      <template #action>
        <span @click="onSearch">搜索</span>
      </template>
    </van-search>
</template>

<script>
export default {
  name: 'VueEleMSearchBar',

  data() {
    return {
      q: ''
    };
  },

  mounted() {
    
  },

  methods: {
    /*
      移动端搜索, 
      1. 用户点击搜索, 键盘搜索, 触发事件, 
      2. 将q搜索内容通过eventBus传递给articleList, 重新刷新文章内容
      注意点: 移动端使用EventBus事件命名使用 -命名
    */  
    onSearch() {
      this.$bus.$emit('search-article', this.q)
      this.q = ''
    }
  },
};
</script>